<template>
  <div>
    <div class="table-pagef-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="5" :sm="12">
            <a-form-item label="能源类型" :labelCol="{span: 8}" :wrapperCol="{span: 15, offset: 1}">
              <j-dict-select-tag  @getInit="initData" ref="jdict" :style="{width: '156px'}" dictCode="ene_energy_type,type,type" v-model="queryParam.energy"   placeholder="请选择能源类型">
              </j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :md="9" :sm="12">
              <a-form-item label="时间范围" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.reportTime_begin"></j-date>
                <span class="query-group-split-cust"></span>
                <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.reportTime_end"></j-date>
              </a-form-item>
          </a-col>

          <a-col :md="10" :sm="24">
            <a-button type="primary" @click="searchQuery">查询</a-button>
            <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            <a-button style="margin-left: 36px" type="primary" icon="download" @click="">导出</a-button>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <div v-if="showCharts":id="'bar-charts-'+id" class="bar-charts"></div>
    <a-empty v-else></a-empty>
    <a-table
      :pagination="ipagination"
      :rowKey="rowKey"
      :columns="columns"
      :dataSource="dataSource"
      :expandedRowKeys="expandedRowKeys"
      v-bind="tableAttrs"
      v-on="$listeners"
      @expand="handleExpand"
      @expandedRowsChange="expandedRowKeys=$event">
      <template slot="paiming" slot-scope="text, record, index">
        {{index+1}}
      </template>
      <template slot="consume" slot-scope="text, record, index">
        {{text}}{{record.unit}}
      </template>
    </a-table>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {getAction} from "@api/manage";
import moment from "moment";
const columns=[
  { title: '排名', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'paiming', scopedSlots: { customRender: 'paiming' }, },
  { title: '车间', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'workshop' },
  { title: '能耗值', align: 'center', width: '25%', widthRight: '70%', dataIndex: 'consume', scopedSlots: { customRender: 'consume' }, },
]

export default {
  props:{
    id:{
      require:false,
      default:1
    }
  },
  data(){
    return{
      showCharts:true,
      ipagination:{
        pageSize: 3,
      },
      initEnergy:'',
      columns,
      dataSource:[],
      queryParam:{
        energy:"",
        workshopId:"",
        reportTime_begin: moment().format('YYYY-MM-01'),
        reportTime_end: moment().format('YYYY-MM-DD')
      },
      url:{
        dashoradRank:"/iot/eneData/dashoradRank",

      }
    }
  },
  mounted() {
  },
  methods:{
    searchReset(){
      this.queryParam={
        energy:this.initEnergy,
        workshopId:"",
        reportTime_begin: moment().format('YYYY-MM-01'),
        reportTime_end: moment().format('YYYY-MM-DD')
      }
      this.$emit('clear')
    },
    initData(value){
      if(value.length>0){
        console.log("value",value)
        this.initEnergy=value[0].label
        this.queryParam.energy=value[0].label
        this.$nextTick(()=>{
          this.drawEnergyDC()
        })
      }
    },
    searchQuery(){
      this.drawEnergyDC()
    },
    drawEnergyDC(){
    getAction(this.url.dashoradRank,this.queryParam).then(res=>{
      if(res.success){
        this.showCharts=true
        this.dataSource=res.result
        this.$nextTick(()=>{
          var chartDom = document.getElementById('bar-charts-'+this.id);
          var myChart = echarts.init(chartDom);
          var option;

          /* myChart.showLoading();

             myChart.hideLoading();*/

          option = {
            color:["#91d5ff"],
            xAxis: {
              type: 'value'

            },
            yAxis: {
              inverse:true,
              type: 'category',
              data: this.dataSource.map(e=>e.workshop)
            },
            series: [
              {
                data: this.dataSource.map(e=>e.consume),
                type: 'bar'
              }
            ]
          };


          option && myChart.setOption(option);
        })
      }else{
        this.dataSource=[]
        this.showCharts=false
      }


})

    },
  }
}
</script>
<style scoped>
.bar-charts{
  width: 100%;
  height: 375px;
}
</style>